<template>
  <div class="body_bgi full p_10 relative">
    <bigscreen-header :headerName="'剪羊毛选手' + personInfo.personNumber" />

    <div class="w_full h_full-100 flex_row_between p_10">
      <!-- 1 -->
      <div class="w_65_p h_full p_10">
        <div class="full chart_box_bgi_1">
          <el-carousel 
            class="color_fff" 
            :autoplay="true" 
            v-if="personInfo.avatar"
          >
            <el-carousel-item class="full" v-for="(item, index) in formatAnimalImg(personInfo.avatar)" :key="index">
              <img 
                class="h_full aspect_ratio_16_9 border_radius_5 cursor object_fit_contain" 
                :src="item" alt=""
              >        
            </el-carousel-item>
          </el-carousel>
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_35_p h_full p_10">
        <el-tabs v-model="activeTabName">
          <el-tab-pane label="基本信息" name="first">
            <div class="full chart_box_bgi_1 color_fff p_10">
              <div class="w_90_p m_0_auto color_fff border_1_s_ccc fs_2vw mt_10" v-if="personInfo.name">
                <div class="w_full border_1_s_ccc pl_10 pv_5">姓名: {{ personInfo.name }}</div>
                <div class="w_full border_1_s_ccc pl_10 pv_5">镇（苏木）: {{ personInfo.townName }} </div>
                <div class="w_full border_1_s_ccc pl_10 pv_5">村（嘎查）: {{ personInfo.villageName }} </div>
                <div class="w_full border_1_s_ccc pl_10 pv_5">剪毛量： {{ personInfo.avgScorData.avgMaoCount }} </div>
                <div class="w_full border_1_s_ccc pl_10 pv_5">剪毛耗时：{{ personInfo.avgScorData.avgMaoTime }}</div>
                <div class="w_full border_1_s_ccc pl_10 pv_5">剪刀痕迹：{{ personInfo.avgScorData.avgScissorMarks }}</div>
                <div class="w_full border_1_s_ccc pl_10 pv_5">重剪毛 {{ personInfo.avgScorData.avgDoubleShearing }}</div>
                <div class="w_full border_1_s_ccc pl_10 pv_5">皮肤破损度 {{ personInfo.avgScorData.avgSkinDamageDegree }}</div>
                <div class="w_full border_1_s_ccc pl_10 pv_5">羊身剪净和羊毛清理程度 {{ personInfo.avgScorData.avgSheepBodyClean }}</div>
                <div class="w_full border_1_s_ccc pl_10 pv_5">善待参赛羊： {{ personInfo.avgScorData.avgBeKindSheep }} </div>
                <div class="w_full border_1_s_ccc pl_10 pv_5">毛套整理： {{ personInfo.avgScorData.avgMaoArrange }}</div>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="评分信息" name="sec">
            <div class="full scroll_box overflow_y_auto">
              <div class="w_full h_80 lh_80 fs_1_5vw fw_bold flex_row_between" v-if="personInfo.name"> 
                <div class="w_50_p color_orange">得分：{{ personInfo.avgScorData.totalScore }}</div> 
              </div>

              <div 
                class="w_full h_80 lh_80 flex_row_between color_fff border_b_1_s_ccc fs_1_5vw" 
                v-for="(item, index) in scoreList" :key="index"
              >
                <div class="w_80 h_80 p_5">
                  <img class="full border_radius_10" src="../assets/image/user.png" alt="">
                </div>
                <div class="w_50_p">评委: {{ item.judgeId }}</div>
                <div class="w_50_p">评分: {{ item.totalScore }}</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        
      </div>
    </div>

    <bigscreen-footer />
  </div>
</template>

<script>
  import { getPersonInfo } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'

  export default {
    name: 'PersonDetail',
    components: { BigscreenHeader, BigscreenFooter },
    data() {
      return {
        activeTabName: 'first',
        personInfo: {},
        scoreList: []
      }
    },
    async mounted() {
      let contestId = this.$route.params.contestId
      let personId = this.$route.params.personId
      this.contestId = contestId
      this.personId = personId

      // 获取 选手 详情 
      this.getPersonInfo(contestId, personId)
    },
    methods: {
      // 获取 选手 详情 
      async getPersonInfo(contestId, personId) {
        let res = await getPersonInfo(contestId, personId)
        try { 
          if (res.code == 1000) {
            this.personInfo = res.data
            this.scoreList = res.data.personScoreList
          } 
        } catch(err) {
          console.log('获取选手评分详情失败 : ', err);
        }
      },

      // 格式化 图片,
      formatAnimalImg(str) {
        let list = str.split(',')

        return list
      },

      formatAnimalGender() {

      },

      formatLevel() {

      }
    }
  }
</script>

<style>
  .el-carousel--horizontal { height: 100% !important; }
  .el-carousel__container { height: 100% !important; }

  .is-active { color: #409eff; }
  .el-tabs__item { color: #fff; font-size: 20px !important; }
</style>